<template>
  <div style="overflow-y:auto;">
    <Form ref="resource" :rules="applyValidate" :model="applyInfo" :label-width="120" label-position="left"
      class="form form_left">
      <Row>
        <Col span="10">
        <FormItem label="资源区分项目:" prop="resourcetype">
          <Select v-model="applyInfo.distinctDim" @on-change="setDom">
            <Option v-for="(item, index) in Object.keys(distinctDimList)" :key="index" :value="distinctDimList[item]">
              {{item}}
            </Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="10" style="left: 10%;">
        <FormItem label="分析维度:" prop="resourcetype">
          <Select v-model="applyInfo.analyseDim" @on-change="setDom">
            <Option v-for="(item, index) in Object.keys(analyseDimList)" :key="index" :value="analyseDimList[item]">
              {{item}}
            </Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="10">
        <FormItem label="是否为工具关联资源:" prop="clazz">
          <RadioGroup v-model="applyInfo.isUse">
            <Radio :label=-1>
              <span>是</span>
            </Radio>
            <Radio :label=1>
              <span>否</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        </Col>
        <Col span="10" style="left: 10%;">
        <FormItem label="可选项类型:" prop="resourcetype">
          <Select v-model="applyInfo.resourcetype" @on-change="setDom">
            <Option :value=0>默认</Option>
            <Option :value=1>单选框</Option>
            <Option :value=3>文本输入</Option>
            <Option :value=4>复选框</Option>
            <Option :value=5>双副本</Option>
            <Option :value=6>三副本</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="10">
        <FormItem label="资源类型:" prop="clazz">
          <Input v-model="applyInfo.clazz" type="text" @on-blur="getSysName" />
        </FormItem>
        </Col>
        <Col span="10" style="left: 10%;">
        <FormItem label="服务名称:" prop="serviceName">
          <Input v-model="applyInfo.serviceName" type="text" />
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="10">
        <FormItem label="细分项名:" prop="subName">
          <Input v-model="applyInfo.subName" type="text" />
        </FormItem>
        </Col>
        <!-- <Col span="10" style="left: 10%;">
        <FormItem label="显示权限:" prop="displayType">
          <Select  v-model="applyInfo.displayType"  :transfer="true" >
          	<Option value="all">全部节段</Option>
            <Option value="only_in_check">评审阶段</Option>
            <Option value="only_in_allo">处理阶段</Option>
            <Option value="in_check_allo">评审和处理阶段</Option>
          </Select>
        </FormItem>
        </Col> -->
      </Row>
      <Row>
        <Col span="10">
        <FormItem label="归属系统:" prop="amId">
          <Select v-model="applyInfo.belongSysId" @on-change="setSys">
            <Option v-for="(item, index) in allSysLists" :key="index" :value="item.id">{{item.sysName}}</Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="10" style="left: 10%;">
        <FormItem label="支持的资源池:">
          <Select v-model="applyInfo.supportSysIds" multiple label-in-value @on-change="setSupportSys">
            <Option v-for="(item, index) in allEntrySys" :key="index" :value="item.id">{{item.sysName}}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <!-- <Row>
        <Col span="10">
        <FormItem label="关联YX服务名称：">
          <Select v-model="applyInfo.yxServiceName" @on-change="checkYXServiceName">
            <Option :value="i.serviceName" v-for="(i,index) in YXPaaSService" :key="index">{{i.serviceNameChinese}}
            </Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="10" style="left: 10%;">
        <FormItem label="关联YX资源名称：">
          <Select v-model="applyInfo.yxName">
            <Option :value="item.name" v-for="(item,index) in YXPaaSServicePricingUnits" :disabled="item.disabled" :key="index">{{item.nickName}}
            </Option>
          </Select>
        </FormItem>
        </Col>
      </Row> -->
      <Row>
        <Col span="10">
        <FormItem label="关联的账号模板:">
          <Select v-model="applyInfo.templateAccountId" :transfer="true" clearable>
            <Option v-for="(item, index) in accountList" :key="index" :value="item.id">{{item.modelName}}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="22">
        <FormItem :label="applyInfo.resourcetype == 3 ? '输入框标题:':'可选项:'">
          <Col span="20">
          <Tag v-for="(item,index) in applyInfo.options" :key="index" :name="item" closable @on-close="delOption">
            {{item}}
          </Tag>
          </Col>
          <Col span="9">
          <Input v-model="optionsInput" width="80px" />
          <Button icon="ios-add" type="dashed" style="margin-left: 10px; position: absolute;"
            @click="addOptions">添加</Button>
          </Col>
        </FormItem>
        </Col>
      </Row>

      <Row>
        <Col span="22" style="width:93.6667%">
        <FormItem label="描述:">
          <Input v-model="applyInfo.des" type="textarea" maxlength="100" :autosize="{minRows: 2,maxRows: 6}" />
        </FormItem>
        </Col>
      </Row>

    </Form>
  </div>
</template>

<script>
  import Axios from 'axios'
  import ajax from "../../../ajax_util"

  export default {
    components: {

    },
    data() {
      return {
        YXPaaSService: [], //亚信服务信息
        YXPaaSServicePricingUnits: [], //亚信服务的资源
        applyValidate: {
          clazz: [{
            required: true,
            type: 'string',
            message: '请填写资源类型',
            trigger: 'blur'
          }, ],
          serviceName: [{
            required: true,
            type: 'string',
            message: '请填写服务名称',
            trigger: 'blur'
          }, ],
          subName: [{
            required: true,
            type: 'string',
            message: '请填写细分项名',
            trigger: 'blur'
          }, ],
          unit1: [{
            required: true,
            type: 'string',
            message: '请填写可选单位1',
            trigger: 'blur'
          }, ],
        },
        allSysLists: [],
        analyseDimList: [], //资源分析可选择
        distinctDimList: [], //分析维度
        optionsInput: "", //资源申请，新增的可选项
        allEntrySys: [], //  关联资源池
        accountList: []
      }
    },
    computed: {
      applyInfo: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      }
    },
    mounted() {
      console.log("===base==resource===========", this.applyInfo, JSON.stringify(this.allResourceList),this.allResourceList);
      this.getSys();
      this.getEntrySys()
      this.getAnalyseDimList()
      this.gitDistinctDimList()
      this.getAccountModelName()
      // this.getYXPaaSService()
    },
    methods: {
      getAccountModelName(){
        var url = this.CONFIG.progress_url + "/template-acconut/name"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.accountList = data
          }
        })
      },
      checkYXServiceName(value) {
        this.YXPaaSServicePricingUnits = this.YXPaaSService.find(e => e.serviceName == value).pricingUnits
      },
      /**
       * 获取亚信资源套餐信息，用于匹配关联
       */
      getYXPaaSService() {
        var url = this.CONFIG.progress_url + "/yx-paas/all-package"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log("getYXPaaSService = ", data)
            that.setYXPaaSService(data);
            that.YXPaaSService = data
            if (that.applyInfo.yxServiceName) {
              that.checkYXServiceName(that.applyInfo.yxServiceName)
            }
          }
        })
      },
      /**
       * 设置YXPaaS资源，一个资源只能绑定一次
       */
      setYXPaaSService(data){
        data.forEach(item =>{
          item.pricingUnits.forEach(service =>{
            var temp = this.allResourceList.find(e => item.serviceName == e.YXServiceName &&  service.name == e.yxName)
            if(temp && temp.id != this.applyInfo.id){
                this.$set(service, "disabled", true)
            }
          })
        })
      },
      setSupportSys(val) {
        console.log("val -- ", val)
        this.applyInfo.supportSys = []
        val.forEach(sys => {
          this.applyInfo.supportSys.push({
            sysId: sys.value,
            sysName: sys.label
          })
        })
      },
      // 获取支持的资源池
      getEntrySys() {
        var url = this.CONFIG.progress_url + "/system-map/for/paas"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.allEntrySys = data
          }
        })
      },
      validate() {
        // console.log("11",this.$refs.resource.validate());
        var result = false;
        this.$refs.resource.validate((valid) => {
          console.log("===876=====", valid);
          result = valid;
        })
        return result;
      },
      /**
       * 获取归属系统
       */
      getSys() {
        var url = this.CONFIG.progress_url + "/system-map/for/resource"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log("-----getSys---------", data)
            that.allSysLists = data
          }
        })
      },
      setEntrySys(id) {
        console.log("-------setSys-------");
        this.applyInfo.belongSys = this.allEntrySys.find(e => e.id == id)
      },
      setSys(id) {
        console.log("-------setSys-------");
        this.applyInfo.belongSys = this.allSysLists.find(e => e.id == id)
      },
      // 获取资源可选项
      getAnalyseDimList() {
        var url = this.CONFIG.progress_url + "/enum/dim-analysis"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.analyseDimList = data
          }
        })
      },
      // 获取分析维度集合
      gitDistinctDimList() {
        var url = this.CONFIG.progress_url + "/enum/dim-distinct"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.distinctDimList = data
          }
        })
      },
      setDom() {
        console.log("------------->")
        this.$forceUpdate();
      },
      getSysName() {

      },
      addOptions() {

        if (this.optionsInput != "" && this.applyInfo.options.indexOf(this.optionsInput) == -1) {
          if (this.applyInfo.resourcetype == 3 && this.applyInfo.options.length > 0) {
            this.$Message.info("添加新标题失败，暂支持添加一个文本标题！")
          } else {
            this.applyInfo.options.push(this.optionsInput)
            this.optionsInput = ""
          }
        } else {
          this.$Message.info("该新增项已存在,或不能为空")
        }
      },
      // 删除可选项
      delOption(event, name) {
        console.log(name, event)
        var index = this.applyInfo.options.indexOf(name)
        this.applyInfo.options.splice(index, 1);
        this.$forceUpdate();
      },
    },
    props: {
      value: {},
      allResourceList:{}
    },
    watch: {}
  }
</script>

<style>

</style>
